<template>
    <div class="editor-layout">
        <div class="e-top">
            <div class="logo"><img src="../../assets/images/logo.png" alt="" />室内地图编辑器</div>
            <div class="e-top-options">
                <div class="item">
                    <span style="font-size: 12px;margin-right: 5px;">变换控件</span>
                    <el-switch
                        v-model="transformControlVisible"
                        style="--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #aaa;"
                        active-value="visible"
                        inactive-value="hidden"
                    />
                </div>
                <div class="item">
                    <span style="font-size: 12px;margin-right: 5px;">线段控件</span>
                    <el-switch
                        v-model="lineControlVisible"
                        style="--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #aaa;"
                        active-value="visible"
                        inactive-value="hidden"
                    />
                </div>
                <div class="item">
                    <el-dropdown>
                        <span class="percentage-options">选择对齐
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon></span>
                        <template #dropdown>
                            <el-dropdown-menu style="width: 80px;">
                                <el-dropdown-item v-for="item in alignOptions" :key="item.value" @click="designRef.handleShapeAlign(item.value)">{{item.label}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <div class="item"><el-tooltip effect="dark" content="撤销"  placement="bottom"><icon-text @click="designRef.setSvgDocument('pre')" name="revoke" size="20px"></icon-text></el-tooltip></div>
                <div class="item"><el-tooltip effect="dark" content="恢复"  placement="bottom"><icon-text @click="designRef.setSvgDocument('next')" name="restore" size="20px"></icon-text></el-tooltip></div>
                <div class="item" @click="handleImportBg"><icon-text name="reference-image" size="20px">导入参考图</icon-text></div>
                <div class="item"><icon-text name="save" size="20px" @click="handleSave">保存</icon-text></div>
                <div class="item"><icon-text name="preview" size="24px" @click="handlePreview">预览</icon-text></div>
                <div class="item"><el-tooltip effect="dark" content="全屏"  placement="bottom"><icon-text @click="toggleFullScreen" name="full" size="20px"></icon-text></el-tooltip></div>
                <div class="item" style="width: 120px; background-color: #f4f4f5; font-size: 14px; padding: 0 10px;">
                    <el-dropdown>
                        <span class="percentage-options">
                            {{percentage}}%
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu style="width: 120px;">
                                <el-dropdown-item v-for="item in ratios" :key="item" @click="designRef.setDesignScale(item)">{{item*100}}%</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <!-- <div class="zoom flex-row-center"><svg-icon name="zoom-out" size="20px" /> <svg-icon name="zoom-in" size="20px" /></div> -->
                <div class="item" @click="router.go(-1)" style="margin-left: 20px;color: var(--el-color-primary);"><icon-text name="exit" size="20px">退出</icon-text></div>
            </div>
        </div>
        <div class="e-content" v-loading="!render">
            <design ref="designRef" 
                v-if="render"
                :transformControlVisible="transformControlVisible" 
                :lineControlVisible="lineControlVisible" 
                @transform-change="handleTransformChange" 
                @size-change="handleSave"
            />
        </div>
        <fileUpload 
            title="上传背景图"
            :visible="bgUplaodVisible"
            @close="bgUplaodVisible=false"
            @confirm="handleImportBgConfirm"
            >   

        </fileUpload>
    </div>
</template>
  
<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import * as turf from '@turf/turf';
import design from './design.vue';
import { useStore } from 'vuex';
import mapDesignStore from './store';
import { getMapDetail, updateMap } from '@/api/map';
import { ElMessage } from 'element-plus';
import fileUpload from '@/components/fileUpload.vue';
import { getIconList } from '@/api/icon';

const route = useRoute();
const router = useRouter();
const store = useStore();
const storeName = "mapDesign";
store.registerModule(storeName, mapDesignStore);
const designRef = ref(null);

const percentage = ref(100);
function handleTransformChange(value){
    percentage.value = parseInt((value.scale*100).toFixed(0));
}
const render = ref(false);
const bgUplaodVisible = ref(false);

const shapeAlign = ref('');
const alignOptions = ref([
    { label: '左对齐', value: 0 },
    { label: '右对齐', value: 1 },
    { label: '上对齐', value: 2 },
    { label: '下对齐', value: 3 }
]);
// var pt = turf.point([-75.343, 39.984], {"marker-color": "F00"});
// var distance = 50;
// var bearing = 90;
// var options = {units: 'miles'};
// var destination = turf.rhumbDestination(pt, distance, bearing, options);
const transformControlVisible = ref('hidden');
const lineControlVisible = ref('hidden');
//console.log(destination,'destination')
const ratios = ref([1,0.75,0.5,0.25])

onMounted(()=>{
    handlePostMapData();
})

onUnmounted(()=>{
    console.log('卸载当前store')
    store.unregisterModule(storeName);
})

function handleImportBgConfirm(value){
    store.dispatch(storeName+'/setMapBaseImg',import.meta.env.VITE_FILE_HOST + value[0].path);
}

function handleSave(){
    store.dispatch(storeName+'/saveMap',designRef.value.getSvgString());
}

function handlePostMapData(){
    const id = route.query.id;
    if(id){
        store.dispatch(storeName+'/setMapId',id);
        getMapDetail(id).then(res=>{
            store.dispatch(storeName+'/setMapData',res.data);
            store.dispatch(storeName+'/setMapBaseImg',res.data.baseImg);
            render.value = true;
        })
    }
}

function toggleFullScreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else if (document.exitFullscreen) {
    document.exitFullscreen()
  }
}

function handleImportBg(){
    bgUplaodVisible.value = true;
}

getSpiritList();
function getSpiritList(){
    getIconList().then(res=>{
        store.dispatch(storeName+'/setSpiritList',res.data.map(item=>{
            return {
                label: item.name,
                value: item.iconUrl
            }
        }));
    })
}

function handlePreview(data){
    let routeData = router.resolve({
        name: `MapPreview`,
        params: { id: store.state[storeName].mapId}
      });
      const page = window.open(routeData.href, "MapPreview",`scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=1920,height=1080,left=0,top=0`);
      page.name = 'MapPreview';
      //console.log(page?.location,'8989')
      page?.location.reload();
}

</script>

<style lang="scss" scoped>
.editor-layout{
    width: 100vw;
    height: 100vh;
    min-width: 1080px;
    overflow: hidden;
    .e-top{
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        border-bottom: 1px solid var(--border-color);
        position: relative;
        z-index: 9;
        background-color: white;
        .logo{
            display: flex;
            align-items: center;
            color: black;
            img{
                width: 38px;
                height: auto;
                margin-right: 5px;
            }
            font-size: 20px;
            letter-spacing: 2px;
        }
        .e-top-options{
            display: flex;
            align-items: center;
            .item{
                height: 30px;
                padding: 0 5px;
                margin: 0 3px;
                display: flex;
                align-items: center;
                cursor: pointer;
                &:hover{
                    background-color: var(--hover-color);
                }
            }
            .zoom{
                svg{
                    cursor: pointer;
                }
            }
            .percentage-options{
                display: flex;
                width: 100px;
                justify-content: space-around;
            }
        }
    }
    .e-content{
        width: 100%;
        height: calc(100% - 50px);
    }
}
</style>

